<!DOCTYPE html>
<html lang="en">
    <head>
        <title>多个控制器</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script type="text/javascript" src="../libs/angular/angular.min.js"></script>
    </head>
    <body ng-app="myApp">
        <fieldset>
            <legend><h3>控制器1 myController1</h3></legend>
            <div ng-controller="myController1">
                <!--结果会显示 myController1.$scope.user.name 的值 Tom-->
                <p>{{user.name}}</p>
                <!--结果会显示 myController1.$scope.user.age 的值 22-->
                <p>{{user.age}}</p>                
            </div>            
        </fieldset>

        <fieldset>
            <legend><h3>控制器2 myController2</h3></legend>
            <div ng-controller="myController2">
                <!--结果会显示 myController2.$scope.user.name 的值 Lucy-->
                <p>{{user.name}}</p>
                <!--结果会显示 myController2.$scope.user.age 的值 20-->
                <p>{{user.age}}</p>                
            </div>            
        </fieldset>       


        <script type="text/javascript">
            var myApp = angular.module('myApp', []);

            myApp.controller('myController1', ['$scope', function($scope){
                $scope.user = {
                    name: 'Tom',
                    age: 22
                }
            }])

            myApp.controller('myController2', ['$scope', function($scope){
                $scope.user = {
                    name: 'Lucy',
                    age: 20
                }
            }])            
        </script>
    </body>
</html>